<template>
  <div>
    <div>
      <div class="header">
        <div class="head-left">
          <!-- <p @click="supermarket" :class="{active: isactive1,activesu: isactive2}">策略</p>
          <p @click="signal" :class="{active: isactive2,activesi:isactive1}">个股</p>
          <p @click='fixIncome' :class="{active: isactive3,activesi:isactive3}">固收</p> -->
          <p  v-for="(allstock,index) in allstocks" :class="{active: allstock.isactive1,activesu: !allstock.isactive1}" @click='clickStock(index)'>{{allstock.name}}</p>
          <!--<p @click="$router.push('/qstrategy/breakeven')" :class="{active:$route.path === '/qstrategy/breakeven'}">保本买卖</p>-->
        </div>
        <div class="head-right">
          <h1 v-if="allstocks[0].isactive1" class="iconfont icon-tubiaozhizuomoban" style="margin-right: 6px;" @click="handleFocus"></h1>
          <h1 class="iconfont icon-liuyan" @click="toMessage"></h1>
        </div>
      </div>
      <div>
        <div ref="countryBox" class="country-box" style="width: 100%;z-index: 999;background: white;">
          <div class="bottom-line"
            :style="{ transform: 'translate3D(' + lineidx * scrollBtnWidth + 'px, 0px, 0)' }"
          >
          </div>
          <div v-if="$route.path === '/qstrategy/all'" class="country-list">
            <a @click="goBack()" class="scrollBtn btnActive"
              >全部</a>
            <a class="scrollBtn"
                ref="scrollBtn"
                v-for="(item, idx) in country"
                :class="{ btnActive : item.active }"
                :key="idx"
                @click="findData(idx, item.c)"
                >{{item.n}}</a>
          </div>
        </div>
      </div>
      <router-view></router-view>
      <v-footer></v-footer>
    </div>
  </div>
</template>

<script>
//import myHeader from '../../components/header.vue'
import country from '../../assets/mooc.js'

let oWidth = document.body.offsetWidth

export default {
  components: {
//    myHeader
  },
  data () {
    return {
      lineidx: 0,
      s: [],
      d: [],
      globalRem: 1,
      coordinate: {
        x: 0,
        y: 0
      },
      currentIdx: false,
      country: [],
      selectedCountry: {},
      isCountryMapActive: false,
      countryPoint: [
        {
          country: 'china',
          point: {
            x: oWidth * 0.75,
            y: 45
          }
        },
        {
          country: 'usa',
          point: {
            x: oWidth * 0.16,
            y: 55
          }
        },
        {
          country: 'japan',
          point: {
            x: oWidth * 0.83,
            y: 55
          }
        },
        {
          country: 'hongkong',
          point: {
            x: oWidth * 0.76,
            y: 75
          }
        },
        {
          country: 'germany',
          point: {
            x: oWidth * 0.50,
            y: 40
          }
        },
        {
          country: 'singapore',
          point: {
            x: oWidth * 0.75,
            y: 97
          }
        },
        {
          country: 'uk',
          point: {
            x: oWidth * 0.46,
            y: 35
          }
        },
        {
          country: 'france',
          point: {
            x: oWidth * 0.45,
            y: 45
          }
        }
      ],
      scrollBtnWidth: 0,
      allstocks: [
        {name: '策略',isactive1: true},
        {name: '个股',isactive1: false},
        {name: '固收',isactive1: false},
      ]
    }
  },
  watch: {
    '$store.state.reloadState': function (val) {
      this.findCountryByNetwork()
    }
  },
  activated () {
    for(var i = 0; i < this.allstocks.length; i++) {
      this.allstocks[i].isactive1 = false
    }
    this.allstocks[this.$store.state.strategyActive].isactive1 = true
  },
  mounted() {

  },
  methods: {
    findData (idx, id) {
      if (this.currentIdx === idx) return
      if (this.$route.path === '/qstrategy/all') {
        this.$store.state.strategyRouterState = 'all'
        this.$router.push('/qstrategy/' + id)
      }
    },
    gotoDetail () {
      let qs = this.$store.state.selectedDQstrage
      this.$router.push(
        {
          path:'/subscribe/',
          query:
            {
              id: qs._id + '&' + qs.country + qs.feature
            }
          }
        )
    },
    getQstrageryByCountry (id, idx) {
      window.localStorage.getItem(`strategyByCountry_${id}`) ? this.getQstrageryByCountryByCache(id, idx) : this.getQstrageryByCountryByNetwork(id, idx)
    },
    getQstrageryByCountryByCache (id, idx) {
      this.$plugins.cacheControl.getCache(`strategyByCountry_${id}`, this.$config.cacheTime.onlineCache).then((res) => {
        this.s = res.data.important
        this.d = res.data.style
        this.s.forEach((item) => {
          this.$set(item, 'active', false)
        })
        this.$set(this.$store.state, 'selectedDQstrage', this.s[0])
        this.d.forEach((item) => {
          this.$set(item, 'active', false)
        })
        setTimeout(() => {
          this.s[0].active = true
        }, 300)
        this.$set(this, 'selectedCountry', res.data)
        this.selectedSQstrage(0)
        document.getElementsByClassName('countNum')[0].innerHTML = res.data.count
      }).catch(() => {
        this.getQstrageryByCountryByNetwork(id, idx)
      })
    },
    getQstrageryByCountryByNetwork (id, idx) {
      this.baseService.get(`strategy/countryCategory?c=${id}`).then((res) => {
        this.$plugins.cacheControl.setCache(`strategyByCountry_${id}`, res.data)
        this.s = res.data.important
        this.d = res.data.style
        this.s.forEach((item) => {
          this.$set(item, 'active', false)
        })
        this.$set(this.$store.state, 'selectedDQstrage', this.s[0])
        this.d.forEach((item) => {
          this.$set(item, 'active', false)
        })
        setTimeout(() => {
          this.s[0].active = true
        }, 300)
        this.$set(this, 'selectedCountry', res.data)
        this.selectedSQstrage(0)
        document.getElementsByClassName('countNum')[0].innerHTML = res.data.count
      })
    },
    findCountry () {
      if (!this.$store.state.networkState) {
        this.$plugins.networkErr()
        this.findCountryByCache(this.$config.cacheTime.offlineCache)
        return
      }
      window.localStorage.getItem('countrylist') ? this.findCountryByCache(this.$config.cacheTime.onlineCache) : this.findCountryByNetwork()
    },
    findCountryByNetwork () {
      this.baseService.get('strategy/country').then((res) => {
        this.$plugins.cacheControl.setCache('countrylist', res.data)
        res.data.forEach((item, idx) => {
          item.active = false
        })
        this.country = res.data
        this.$nextTick(() => {
          this.scrollBtnWidth = this.$refs.scrollBtn[0].offsetWidth
        })
        this.country.forEach((item, idx) => {
          if (this.$route.params.id === item.c) {
            this.$set(this, 'coordinate', this.countryPoint[idx].point)
            this.seeDetail(item.c, idx)
            this.$set(this.$store.state, 'qstrageryByCountry', idx)
            if (idx === 0) {
              document.getElementsByClassName('point')[0].className = 'point pointActive'
            }
            this.$store.state.qstrageryDetail = true
          }
        })
      })
    },
    findCountryByCache (min) {
      this.$plugins.cacheControl.getCache('countrylist', min).then((res) => {
        res.data.forEach((item, idx) => {
          item.active = false
        })
        this.country = res.data
        this.$nextTick(() => {
          this.scrollBtnWidth = this.$refs.scrollBtn[0].offsetWidth
        })
        this.country.forEach((item, idx) => {
          if (this.$route.params.id === item.c) {
            this.$set(this, 'coordinate', this.countryPoint[idx].point)
            this.seeDetail(item.c, idx)
            this.$set(this.$store.state, 'qstrageryByCountry', idx)
            if (idx === 0) {
              document.getElementsByClassName('point')[0].className = 'point pointActive'
            }
            this.$store.state.qstrageryDetail = true
          }
        })
      }).catch(() => {
        this.findCountryByNetwork()
      })
    },
    seeDetail (arg, idx) {
      this.isCountryMapActive = true
      this.findData(idx, arg)
      // TODO: 用store存储选择的策略下标
      // TODO: 禁止地图拉出界面
      // TODO: 策略菜单回弹
      // TODO  点过的国家移动后不能再点
      // console.log(this.$store.state.selectedDQstrage)
    },
    selectedSQstrage (arg) {
      this.s[arg].active ? this.gotoDetail() : ''
      this.loop(this.s)
      this.loop(this.d)
      this.s[arg].active = true
      this.$set(this.$store.state, 'selectedDQstrage', this.s[arg])
    },
    selectedDQstrage (arg) {
      this.d[arg].active ? this.gotoDetail() : ''
      this.loop(this.s)
      this.loop(this.d)
      this.d[arg].active = true
      this.$set(this.$store.state, 'selectedDQstrage', this.d[arg])
    },
    loop (arr) {
      arr.forEach((item) => {
        item.active = false
      })
    },
    goBack () {
      this.isCountryMapActive = false
      setTimeout(() => {
        this.$router.push('/qstrategy')
      }, 300)
    },
    clickStock (index) {
      for(let i = 0; i< this.allstocks.length; i++) {
        this.allstocks[i].isactive1 = false
      }
      this.allstocks[index].isactive1 = true
      if(index == 0) {
        this.$router.push('/qstrategy/all')
      } else if (index == 1) {
        this.$router.push('/qstrategy/signal?id=AMD.O')
      } else{
        this.$router.push('/qstrategy/fixIncome')
      }
    },
    handleFocus () {
      this.$router.push('/searchCom')
    },
    toMessage () {
      this.$router.push('/messageCenter')
    }
  },
  created () {
    this.findCountry()
  }
}
</script>

<style lang="less" scoped>
.country-box {
  display: -webkit-box;
  width: 100%;
  position: relative;
  overflow: scroll;
  border-top: 2px solid #EDF1F5;
  margin-top: 0.5em;
  flex-direction: row;
  .country-list {
    display: flex;
    padding: 0 0.2rem;
    a {
      display: flex;
      font-size: 1.2rem;
      justify-content: center;
      width: 4.2rem;
      align-items: center;
      padding: 0 0.5rem;
      color: rgba(102,102,102,0.5);
      margin: 0.5rem 0;
      position: relative;
      letter-spacing: 2px;
    }
    a:before {
      content: '';
      height: 12px;
      width: 1px;
      position: absolute;
      top: 5px;
      background: rgba(102, 102, 102, 0.3);
      right: 0;
    }
    a:before:nth-last-child {
      background: white;
    }
    a:last-child {
      border-right: 0px solid white;
    }
  }
}

.country-box::-webkit-scrollbar {
  height: 2px;
}

.bottom-line {
  position: absolute;
  background: #7590FF;
  height: 3px;
  width: 2.5rem;
  margin: 0 1.2rem;
  top: 26px;
  transition: transform 0.3s;
  border-radius: 5px;
}

  @media screen and (max-width: 320px) {

  }
  @media screen and (max-width:375px) and (min-width:321px) {
    .country-box {
      a {
        // font-size: 1.4rem !important;
        width: 5.8rem !important;
      }
      .bottom-line {
        width: 2.9rem;
        margin: 0 2.1rem;
        top: 27px;
      }
    }
  }
  @media screen and (min-width: 376px){
    .country-box {
      a {
        // font-size: 1.6rem !important;
        width: 6.2rem !important;
      }
      .bottom-line {
        width: 3rem;
        margin: 0 2.24rem;
        top: 27px;
      }
    }
  }

.btnActive {
  color: #4b67fb !important;
}

.header{
  height:60px;
  width:100%;
  /*margin-top: 10px;*/
  padding: 20px 10px 0 10px;
  display: flex;
  justify-content: space-between;
  align-items:center;
  /*border-bottom: 1px solid #E9E9E9;*/
  box-sizing: border-box;
}
.head-left{
  display: flex;
  border: 1px solid #EDF1F5;
  border-radius: 16px;
  flex-direction: row;
}
.head-left p{
  padding: 4px 2.2rem;
  opacity: 0.5;
}
.head-left p.active{
  background: -webkit-linear-gradient(top left,#6379F8,#91A5F8);
  border-radius: 16px;
  color: #ffffff;
  z-index: 999;
  font-weight: 500;
  opacity: 1;
}
.head-left p.activesi{
  margin-left: -10px;
  padding-left: 18px;
}
.head-left p.activesu{
  margin-right: -10px;
  padding-right: 18px;
}
.head-right{
  display: flex;
  flex-direction: row;
}

</style>
